<!-- 社区认证 -->
<template>
  <div class="authentication">
    <myheader>
      <template v-slot:title>社区认证</template>
      <template v-slot:name>历史记录</template>
    </myheader>

    <!-- 存社区信息开始 -->
    <div class="myCommuntiy">
      <ul class="myCommuntiy_ul">
        <li>
          <div>所在社区：</div>
          <div>{{ communtiy.communtiyName }}</div>
        </li>

        <li>
          <div>社区地址：</div>
          <div>{{ communtiy.communtiyAddres }}</div>
        </li>

        <li>
          <div>联系方式：</div>
          <div>{{ communtiy.communtiyTel }}</div>
        </li>

        <li>
          <div>加入时间：</div>
          <div>{{ communtiy.communtiyDate }}</div>
        </li>

        <li>
          <div>社区简介：</div>
          <div>{{ communtiy.communtiyIntroduce }}</div>
        </li>
      </ul>

      <div class="div_out" @click="add">退出社区</div>
    </div>
    <!-- 存社区信息结束 -->

    <div>
      <li class="img_w">
        <img src="../../assets/noJoin.png" alt />
      </li>
      <div class="div_out" @click="add">申请加入</div>
    </div>
  </div>
</template>

<script>
import myheader from '../../comon/myheader.vue'
import { Toast } from 'vant'
export default {
  data() {
    return {
      communtiy: {
        //社区表
        loginId: 111111, //用户id   长整型Longint
        communtiyId: 1, //社区ID
        communtiyName: '福理社区', //社区名
        communtiyAddres: '福建省福州市潘渡乡福州理工学院', //社区地址
        communtiyTel: '1560650****', //社区电话
        communtiyDate: '2010-10-10', //加入时间
        communtiyIntroduce:
          '福州理工学院（Fuzhou Institute of Technology），位于福建省会福州市，是经教育部批准成立的一所民办普通本科高校，是福建省本科高校向应用型转变整体转型试点学校。',
        // 社区介绍
        communtiyCreator: '', //创建者用户Id
        communtiyNumber: 1, //社区总人数
      },
      fontSize: 18, //字体大小18px
    }
  },

  methods: {
    add() {
      Toast('正在规划建设中...')
    },
    //改变字体大小
  },

  components: {
    myheader,
  },
}
</script>

<style scoped>
.authentication {
  font-size: 18px;
}
.myCommuntiy_ul > li {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  padding: 0 15px;
}
.myCommuntiy_ul > li > div:first-child {
  white-space: nowrap;
}

.div_out {
  height: 50px;
  width: 50%;
  background-color: #39a9ed;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  margin: 30px auto;
  border-radius: 10px;
}
.img_w {
  position: relative;
  width: 100%;
  height: 100%;
}
.img_w > img {
  width: 100%;
  height: 100%;
  display: block;
}
.img_w:after {
  width: 100%;
  height: 100%;
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  box-shadow: 0 0 60px 50px #fafafa inset;
}
</style>
